<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text">
    <input type="text" v-myfocus>
    <input type="text" v-mycolor="colorStyle">
    <input type="text" v-mycolor="{color:'orange'}">
    <input type="text" v-mycolor1="{color:'green'}">
</div>

<script type="text/javascript">
    //自定义指令 全局指令
    Vue.directive("myfocus",{
        inserted:function(el){
            //el表示指令锁绑定的元素
            el.focus()
        }
    })
    Vue.directive('mycolor',{
        bind:function(el,binding){
            console.log(binding)
            //修改背景颜色
            el.style.backgroundColor=binding.value.color;
        }
    })
    var app=new Vue({
        el:'#app',
        data:{
            colorStyle:{color:'red'}
        },
        //局部指令 只在本组件里使用
        directives:{
            mycolor1:{
                bind:function(el,binding){
                    //修改背景颜色
                    el.style.backgroundColor=binding.value.color;
                }
            },
            myfocus1:{
                inserted:function(el){
                    //el表示指令锁绑定的元素
                    el.focus()
                }
            }
        }
    })
</script>

</body>
</html>